<template>
  <view class="login-container">
    <view class="wave-box">
      <view class="wave wave-1"></view>
      <view class="wave wave-2"></view>
    </view>

    <view class="content">
      <view class="logo-section">
        <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
        <view class="title-group">
          <text class="title">青松派-中医智诊</text>
        </view>
      </view>

      <view class="form-section">
        <view class="input-group">
          <uni-icons type="email" size="24" color="#36D1DC"></uni-icons>
          <input type="text" v-model="loginForm.email" placeholder="请输入邮箱" class="input" />
        </view>
        <view class="input-group">
          <uni-icons type="locked" size="24" color="#36D1DC"></uni-icons>
          <input type="password" v-model="loginForm.password" placeholder="请输入密码" class="input"
            @confirm="handleLogin" />
        </view>

        <button @tap="handleLogin" class="login-btn" hover-class="button-hover" :loading="loading">
          <text>登 录</text>
        </button>

        <view class="other-options">
          <text @tap="handleForgetPassword">忘记密码</text>
          <text @tap="handleRegister">注册账号</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import request from '@/utils/request'

const loginForm = reactive({
  email: 'test@test.com',
  password: '123456'
})

const loading = ref(false)

// 验证邮箱格式
const validateEmail = (email) => {
  const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
  return reg.test(email)
}

const handleLogin = async () => {
  try {
    loading.value = true
    if (!loginForm.email || !loginForm.password) {
      uni.showToast({
        title: '请输入邮箱和密码',
        icon: 'none'
      })
      return
    }

    if (!validateEmail(loginForm.email)) {
      uni.showToast({
        title: '邮箱格式不正确',
        icon: 'none'
      })
      return
    }
    // 登录请求
    const res = await request.post('/user/login', {
      email: loginForm.email,
      password: loginForm.password
    })

    // 登录成功后保存token
    uni.setStorageSync('userInfo', res.data)

    // 登录成功后跳转到首页
    uni.reLaunch({
      url: '/pages/user/index'
    })
  } catch (error) {
    uni.showToast({
      title: error || '登录失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

const handleForgetPassword = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

const handleRegister = () => {
  uni.navigateTo({
    url: '/pages/login/register'
  })
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f3ff 100%);
  position: relative;
  overflow: hidden;
}

.wave-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55vh;
  background: linear-gradient(135deg, #36D1DC 0%, #36D1DC 100%);
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  transform: scaleX(1.5);

  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="white" fill-opacity="1" d="M0,32L48,37.3C96,43,192,53,288,80C384,107,480,149,576,144C672,139,768,85,864,69.3C960,53,1056,75,1152,90.7C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') repeat-x;
    background-size: 1440px 100px;
    animation: wave 10s linear infinite;

    &.wave-1 {
      opacity: 0.3;
      animation-duration: 5s;
    }

    &.wave-2 {
      opacity: 0.6;
      animation-duration: 7s;
    }
  }
}

@keyframes wave {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-1440px);
  }
}

.content {
  position: relative;
  z-index: 1;
  padding: 60rpx;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 140rpx;

  .logo {
    width: 180rpx;
    height: 180rpx;
    border-radius: 40rpx;
    box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
  }

  .title-group {
    margin-top: 40rpx;
    text-align: center;

    .title {
      font-size: 48rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 16rpx;
      text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    }

  }
}

.form-section {
  margin-top: 100rpx;
  padding: 60rpx 40rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 30rpx;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);

  .input-group {
    position: relative;
    margin-bottom: 40rpx;

    :deep(.uni-icons) {
      position: absolute;
      left: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    .input {
      height: 100rpx;
      padding: 0 30rpx 0 90rpx;
      border-radius: 50rpx;
      background: #fff;
      font-size: 28rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:focus {
        box-shadow: 0 4rpx 20rpx rgba(110, 142, 251, 0.2);
      }
    }
  }

  .login-btn {
    width: 100%;
    height: 100rpx;
    margin-top: 60rpx;
    border-radius: 50rpx;
    background: linear-gradient(135deg, #36D1DC 0%, #36D1DC 100%);
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    .iconfont {
      margin-left: 10rpx;
      font-size: 32rpx;
    }

    &.button-hover {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 8rpx rgba(110, 142, 251, 0.2);
    }
  }

  .other-options {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    padding: 0 20rpx;

    text {
      font-size: 26rpx;
      color: #666;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: -4rpx;
        left: 0;
        width: 100%;
        height: 2rpx;
        background: #666;
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }

      &:active::after {
        transform: scaleX(1);
      }
    }
  }
}

// 字体图标
@font-face {
  font-family: 'iconfont';
  src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAOMAAsAAAAACFwAAAM+AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDMgqDaIM0ATYCJAMUCwwABCAFhGcHWBuFBxHVm8PIfhzGMck6c2bkTSjPG/sePF+69P3d1UUnhRgUQqyA5BBPz9SlMjBVQJUnnZ0EgFmbnT6jEoVERhkZ5OTwL/3XpxsQgLJ7/v/v+3nsHrEPAE2s6CxIAbDyf+fOfAFsaRZkoJhiL+sLHOtGPOUt/wONpZ0B4nogXx0/HiBpwKYtOL6Xw0LGCBUy1KQiY8T/53DphgLWYnlgc8pF1QpkUXQV6N4yWuErRVs+CvQFXIy+H/6DBheSWgZWXn82ZkHqz/gZbJb+P+dCIIrzgdtGhjGgEDfznWuiE3NGpJNm6docoNVKwmcnp7n/33UXVqsdRcvQf3iJrEgIFHSdxQYyQwM+I0cEn8kigc86hR+JhnUPQwurhMPAJG7QwVXOJVqKguWC/H7HhKZrfdj+G71+/VzrG1R1nCPiFtNz8AD3qLoA8YRmV7LxEGtxxUe+8ZNvDlZ/dh1gZm0pUEDHtNz9/kH0DXGPkxv8XUTe8R8cf5PXW+0XbS1+/KT0xWzZZ6ZK5rjnvtUVrbH+TH2pN9XT0x9oRxs/Sf7s2Sfu3WvF3Lt3LnLfvjPR9+/jnT/3zoXevUuvvLPvnJ/QHYLwu3aEc706b6qlO/R0S/xFvbGU9lhL/vbt+3s3kxeGZdwS7c1bWxo6rrfE3zz2/LmxdYs2jLe0uyVvecTAAy3NLRt97bGO8Y1929eV9c5s2/S6uSX+lrHnL4yxW7Vx3L+1pf5/FJL4D+8NiTszW7doQ39zc8uGvsCjpM/XXJ0JxK8tXwZYiwX/pdwAAN+bHyMAMN+1nQWwkN0AYC67+1+y3QjgZvb/k0z+t3QA8Bsvk/aY6iRogL8KjR6pgzRFqYS/KcWfkhzuJPkHKOK7SNYgGa1tGJLDj0hlxMNEY8Rcu9HDgAqpRWjTJgBhyGZIBryFbMgRUeG/IRvzGykjYaHNVHRdsGEiQ0KHEoEsBvYg6enpUFU1xtRjprV4CQKtC1A0jgW1CC2DYjFeGZ0YYoV4QLyIE7qjKApYi8eQj3EYUlSUQFVpOhCiVA3FUTweQdFRFLA6SZ2eHtUYABwkBEQhwIIBswPR0qNHB6lnT4ZR92xaK7wIBLS2T0LGYgGpIQ2WDhQrTF5T50YMY0nwAMRLOA9yh0JBwIYUPQ3xYTAYRCEFCUilNNEQCEVSQ+Eh8fAQKEQ0CsA0J9LR0zNUc3h9U/Z8W0BSsL5cIkeJGk0zRkzL0mOlQgAAAAA=') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-email:before {
  content: "\e66f";
}

.icon-password:before {
  content: "\e82b";
}

.icon-arrow:before {
  content: "\e665";
}
</style>